<template>
	<view class="u-p-20 ">
		<!-- #ifdef MP-WEIXIN-->
		<base-ad :adInfo="topAdInfo" v-if="topAdInfo"></base-ad>
		<!-- #endif -->

		<!-- #ifdef APP-ANDROID || H5 -->
		<view class="" style="height: 200px;">
			<base-ad :adInfo="topAdInfo" v-if="topAdInfo"></base-ad>
		</view>
		<!-- #endif -->

		<view class="u-p-20 bg_FFFFFF u-b-r-20 bs_CCCCCC">
			<view class="u-m-t-20 u-font-34" style="border-bottom: 1rpx solid #F4F4F4; padding:20rpx 0 ;">
				<u-input placeholder='请输入卡号' placeholder-style="font-size:32rpx" :custom-style="{'font-size':'32rpx'}"
					v-model="params.card_no"></u-input>
			</view>
			<view class="u-m-t-20 u-m-b-20 u-font-34" style="border-bottom: 1rpx solid #F4F4F4; padding:20rpx 0 ;">
				<u-input placeholder='请输入卡密' placeholder-style="font-size:32rpx" :custom-style="{'font-size':'32rpx'}"
					v-model="params.card_pwd"></u-input>
			</view>
		</view>

		<view class="" v-if="cost!=0">
			<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="u-flex">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
					</view>
					<view class="u-m-l-30">
						<view class=" cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text>
						</view>
					</view>
				</view>
				<view class="u-flex">

					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='deposit'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else></u-image>
					</view>
				</view>

			</view>

			<view style="color: #afacac;font-size: 26rpx;padding: 14rpx;">请充值余额并优先选择余额支付</view>

			<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="">
					<view class=" u-flex">
						<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">易支付</view>
					</view>

				</view>
				<view class="u-flex">
					<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays == 'epay'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else>
						</u-image>
					</view>
				</view>
			</view>

			<!-- #ifdef APP || MP-WEIXIN -->
			<view v-if="showWechatPay && is_wechat_switch == 1" @click="pays='wechat'" class="u-flex u-row-between u-p-30"
				style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
					</view>
				</view>
				<view class="u-flex">
					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='wechat'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else></u-image>
					</view>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef APP || MP-ALIPAY -->
			<view @click="pays='alipay'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;"
				v-if="!isWechatMP && userinfo.alipay_switch==1">
				<view class="">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
					</view>

				</view>
				<view class="u-flex">

					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='alipay'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else></u-image>
					</view>
				</view>

			</view>
			<!-- #endif -->
			<view class="u-p-20">本次激活需支付{{cost}}元，平台赠送抵扣金{{deduct}}元</view>
		</view>
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200" v-if="shows">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>
		<view class="u-m-t-40">
			<u-button :customStyle="customStyle" :ripple="true" :hair-line="true" class="u-b-r-20 u-font-32"
				@click="submit">提交
			</u-button>
		</view>
		<view class="" style="margin-top: 10px;">

		</view>
		<!-- #ifdef MP-WEIXIN-->
		<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>
		<!-- #endif -->

		<!-- #ifdef APP-ANDROID || H5 -->
		<view class="" style="height: 200px;">
			<base-ad :adInfo="buttomAdInfo" v-if="buttomAdInfo"></base-ad>
		</view>
		<!-- #endif -->

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				card_no: '',
				card_pwd: ''
			},
			customStyle: this.$styleCls.btnStyle,
			regcode: '',
			topAdInfo: null,
			buttomAdInfo: null,
			cost: 0,
			deduct: 0,
			showWechatPay: true,
			userinfo: null,
			pays: 'wechat',
			shows: false,
			showEpayDialog: false,
			epayParams: {
				epay_type: 'wxpay',
				method: ''
			},
			isWechatMP: false, // 新增的WeChat Mini Program判断
			is_wechat_switch: '1',
		}
	},
	onLoad(obj) {
		// #ifdef MP-WEIXIN
		if (obj.regcode) {
			uni.setStorageSync('zcRegcode', obj.regcode)
		}
		// #endif
		// this.massage()
		this.wechatPaySwitch()
		this.getActivationCost()
		this.detectDeviceType()
		if (uni.getStorageSync('token')) {
			this.userinfo = uni.getStorageSync('userinfo')
			console.log(this.userinfo)
			this.getTopAd()
			this.getButtomAd()
		}


	},

	onShow() {
		if (uni.getStorageSync('token')) {
			this.regcode = uni.getStorageSync('userinfo').regcode
			console.log(this.regcode)
		}
	},
	onShareAppMessage() {
		return {
			title: uni.getStorageSync('conf').web_site_title,
			imageUrl: uni.getStorageSync('conf').web_site_logo,
			path: `/subcontract/topUpCard/topUpCard?regcode=${this.regcode}`
		}
	},
	onShareTimeline() {
		return {
			title: uni.getStorageSync('conf').web_site_title,
			imageUrl: uni.getStorageSync('conf').web_site_logo,
			path: `/subcontract/topUpCard/topUpCard?regcode=${this.regcode}`
		}
	},
	methods: {
		wechatPaySwitch() {
			this.$api.cardActSwitch({}, (res) => {

				// #ifdef MP-WEIXIN
				if (res.data.data.is_show != 1) {
					this.pays = 'deposit'
					this.showWechatPay = false
				}
				//  #endif
				// #ifdef APP-PLUS || MP-ALIPAY
				if (res.data.data.is_show != 1) {
					this.pays = 'alipay'
					this.showWechatPay = false
				}
				// #endif
				// #ifdef H5
				if (res.data.data.is_show != 1) {
					this.pays = 'deposit'
				}
				// #endif
			})
		},
		getActivationCost() {
			this.$api.getActivationCost({}, res => {
				const {
					cost,
					deduct
				} = res.data.data;
				this.deduct = deduct
				this.cost = cost
			})
		},
		massage() {
			this.$api.get_my_massage({}, res => {
				this.userinfo = res.data.data.data
				// #ifdef MP-WEIXIN
				this.is_wechat_switch = this.userinfo.mini_wechat_switch
				// #endif
				// #ifdef H5
				this.is_wechat_switch = this.userinfo.h5_wechat_switch
				// #endif
				// #ifdef APP-PLUS
				this.is_wechat_switch = this.userinfo.app_wechat_switch
				// #endif
			})
		},
		getTopAd() {
			this.$api.getAd({
				pos: 'charge_card_top'
			}, res => {
				// console.log(res)
				this.topAdInfo = res.data.data
			})
		},
		getButtomAd() {
			this.$api.getAd({
				pos: 'charge_card_bottom'
			}, res => {
				// console.log(res)
				this.buttomAdInfo = res.data.data
			})
		},
		card_recharge() {
			this.$api.card_recharge(this.params, res => {
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/subcontract/Rechargemoney2/Rechargemoney2'
						})
					}, 500)
				}
			})
		},
		submit() {
			if (this.params.card_no == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入卡号'
				})
				return
			}
			if (this.params.card_pwd == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入卡密'
				})
				return
			}

			if (this.cost != 0) {
				this.activationCodeCharge()
			} else {
				this.card_recharge()
			}

		},
		activationCodeCharge() {
			this.$api.activationCodeCharge({ ...this.params, pay_money: this.cost }, res => {
				console.log(res)
				if (res.data.code === 1) {
					this.pay(res.data.data)
				}
			})
		},
		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.yuePay(e)
			this.shows = false
		},
		yuePay(e = '') {
			this.params2.trade_pwd = e
			uni.showLoading({
				title: '支付中',
				mask: true
			});
			this.$api.go_pay2({
				...this.params2,
				trade_pwd: e
			}, res => {
				uni.hideLoading()
				if (res.data.code == 0) {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						callback: cal => {
							uni.navigateBack()
						}
					})

				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			})
		},
		pay(obj) {
			let params = {
				target_id: obj.target_id,
				target_type: 'activation_card',
				pay_type: this.pays,
				method: this.epayParams.method,
				type: this.epayParams.epay_type,
				// #ifdef APP-PLUS
				client: 'APP',
				// #endif
				// #ifdef MP-WEIXIN || MP-ALIPAY
				client: 'JSAPI',
				// #endif
				// #ifdef H5
				client: 'WAP',
				// #endif
				trade_pwd: '',
				random: 1
			}
			console.log(this.pays)
			if (this.pays == 'deposit') {
				// this.shows = true
				this.params2 = params
				this.yuePay()
				return
			} else if (this.pays == 'epay') {
				// this.shows = true
				// 易支付
				let epayParams = {
					target_id: obj.target_id,
					target_type: 'activation_card',
					pay_type: this.pays,
					// 如果是微信小程序，强制使用微信支付
					type: this.isWechatMP ? 'wxpay' : this.epayParams.epay_type,
					method: this.epayParams.method,
					client: 'APP',
					random: 1,
					// 根据不同平台设置不同的client参数
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
				}
				this.$com.easyPay(epayParams, this.pays);
				return;
			}

			// #ifdef H5
			if (this.pays === 'wechat') {
				this.$refs.uToast.show({
					title: 'H5微信暂未开通支付',
				})
				return
			}
			this.$com.wxPay2(params, this.pays).then(ok => {
				const div = document.createElement('div');
				div.id = 'alipay';
				div.innerHTML = ok;
				document.body.appendChild(div);
				document.querySelector('#alipay').children[0].submit()
			})
			// #endif
			// #ifdef APP-PLUS
			this.$com.wxPay2(params, this.pays).then(ok => {
				console.log(ok)
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {

						uni.navigateBack()
					}
				})
			})
			// #endif
			// #ifdef MP-WEIXIN
			this.$com.weChatPay2(params, this.pays).then(ok => {
				console.log(ok)
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {
						uni.navigateBack()
					}
				})
			})
			// #endif


			// #ifdef MP-ALIPAY
			this.$com.aliPay2(params, this.pays).then(ok => {
				console.log(ok)
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {
						uni.navigateBack()
					}
				})
			})
			// #endif
		},
		openEpayDialog() {
			this.pays = 'epay'
			this.showEpayDialog = true
		},
		selectEpayMethod(type) {
			this.epayParams.epay_type = type
		},
		confirmEpayMethod() {
			this.showEpayDialog = false
		},
		detectDeviceType() {
			// #ifdef H5
			this.epayParams.method = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.epayParams.method = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.epayParams.method = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.epayParams.method = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.epayParams.method)
			console.log('是否为微信小程序:', this.isWechatMP)
		}
	}
}
</script>

<style scoped lang="scss">
/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>